'use client'
import React from 'react'
import useSWR from 'swr'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import relativeTime from 'dayjs/plugin/relativeTime'
import { useContext } from 'use-context-selector'
import { useTranslation } from 'react-i18next'
import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline'
import { Pagination } from 'react-headless-pagination'
import s from './style.module.css'
import { APP_PAGE_LIMIT } from '@/config'
import I18n from '@/context/i18n'
import { useAppContext } from '@/context/app-context'
import LogoEmbededChatHeader from '@/app/components/base/logo/logo-embedded-chat-header'
import { fetchCodeLogs } from '@/service/common'
dayjs.extend(relativeTime)

const CodelogPage = () => {
  const { t } = useTranslation()
  const { locale } = useContext(I18n)
  const [currPage, setCurrPage] = React.useState<number>(0)
  const { userProfile, currentWorkspace, isCurrentWorkspaceManager } = useAppContext()
  const { data, mutate } = useSWR({ url: `/codelog/page/${currPage + 1}/${APP_PAGE_LIMIT}` }, fetchCodeLogs)
  const total = data?.total || 0
  const codelogs = data?.codeLogs || []
  return (
    <>
      <div className='flex flex-col'>
        <div className='flex items-center mb-4 p-3 bg-gray-50 rounded-2xl'>
          <LogoEmbededChatHeader className='!w-10 !h-10'/>
          <div className='grow mx-2'>
            <div className='text-sm font-medium text-gray-900'>{currentWorkspace?.name}</div>
          </div>
        </div>
        <div className='overflow-visible lg:overflow-visible'>
          <div className='flex items-center py-[7px] border-b border-gray-200 min-w-[480px]'>
            <div className='w-[200px] px-3 text-xs font-medium text-gray-500'>手机号</div>
            <div className='w-[120px] px-3 text-xs font-medium text-gray-500'>类型</div>
            <div className='w-[120px] px-3 text-xs font-medium text-gray-500'>验证码</div>
            <div className='w-[120px] px-3 text-xs font-medium text-gray-500'>是否验证</div>
            <div className='w-[120px] px-3 text-xs font-medium text-gray-500'>状态</div>
            <div className='w-[120px] px-3 text-xs font-medium text-gray-500'>IP</div>
            <div className='w-[70px] px-3 text-xs font-medium text-gray-500'>原因</div>
            <div className='w-[210px] px-3 text-xs font-medium text-gray-500'>时间</div>
          </div>
          <div className='min-w-[480px] relative'>
            {
              codelogs.map((codelog: any) => (
                <div key={codelog.id} className='flex border-b border-gray-100'>
                  <div className='w-[200px] flex items-left py-2 px-3'>
                    <div className=''>
                      <div className='text-xs text-gray-500 leading-[18px]'>{codelog.phone}</div>
                    </div>
                  </div>
                  <div className='w-[120px] flex items-center py-2 px-3'>
                    <div className=''>
                      {
                        codelog.type === '0' && <div className='text-xs text-gray-500 leading-[18px]'>验证码</div>
                      }
                      {
                        codelog.type === '1' && <div className='text-xs text-gray-500 leading-[18px]'>语音验证码</div>
                      }
                      {
                        codelog.type === '2' && <div className='text-xs text-gray-500 leading-[18px]'>短信消息通知</div>
                      }
                    </div>
                  </div>
                  <div className='w-[120px] flex items-center py-2 px-3'>
                    <div className=''>
                      <div className='text-xs text-gray-500 leading-[18px]'>{codelog.code}</div>
                    </div>
                  </div>
                  <div className='w-[120px] flex items-center py-2 px-3'>
                    <div className=''>
                      {
                        codelog.checked === '0' && <div className='text-xs text-gray-500 leading-[18px]'>未验证</div>
                      }
                      {
                        codelog.checked === '1' && <div className='text-xs text-gray-500 leading-[18px]'>已验证</div>
                      }
                    </div>
                  </div>
                  <div className='w-[120px] flex items-center py-2 px-3'>
                    <div className=''>
                      {
                        codelog.status === '0' && <div className='text-xs text-gray-500 leading-[18px]'>未发送</div>
                      }
                      {
                        codelog.status === '1' && <div className='text-xs text-gray-500 leading-[18px]'>已发送</div>
                      }
                      {
                        codelog.status === '2' && <div className='text-xs text-gray-500 leading-[18px]'>发送失败</div>
                      }
                    </div>
                  </div>
                  <div className='w-[120px] flex items-center py-2 px-3'>
                    <div className=''>
                      <div className='text-xs text-gray-500 leading-[18px]'>{codelog.ip}</div>
                    </div>
                  </div>
                  <div className='w-[70px] flex items-center py-2 px-3'>
                    <div className=''>
                      <div className='text-xs text-gray-500 leading-[18px]'>{codelog.reason}</div>
                    </div>
                  </div>
                  <div className='w-[210px] flex items-center py-2 px-3'>
                    <div className=''>
                      <div className='text-xs text-gray-500 leading-[18px]'>{codelog.created_at}</div>
                    </div>
                  </div>
                </div>
              ))
            }
            {(total && total > APP_PAGE_LIMIT)
              ? <Pagination
                className="flex items-center w-full h-10 text-sm select-none mt-8"
                currentPage={currPage}
                edgePageCount={2}
                middlePagesSiblingCount={1}
                setCurrentPage={setCurrPage}
                totalPages={Math.ceil(total / APP_PAGE_LIMIT)}
                truncableClassName="w-8 px-0.5 text-center"
                truncableText="..."
              >
                <Pagination.PrevButton
                  disabled={currPage === 0}
                  className={`flex items-center mr-2 text-gray-500  focus:outline-none ${currPage === 0 ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:text-gray-600 dark:hover:text-gray-200'}`} >
                  <ArrowLeftIcon className="mr-3 h-3 w-3" />
                  {t('appLog.table.pagination.previous')}
                </Pagination.PrevButton>
                <div className={`flex items-center justify-center flex-grow ${s.pagination}`}>
                  <Pagination.PageButton
                    activeClassName="bg-primary-50 dark:bg-opacity-0 text-primary-600 dark:text-white"
                    className="flex items-center justify-center h-8 w-8 rounded-full cursor-pointer"
                    inactiveClassName="text-gray-500"
                  />
                </div>
                <Pagination.NextButton
                  disabled={currPage === Math.ceil(total / APP_PAGE_LIMIT) - 1}
                  className={`flex items-center mr-2 text-gray-500 focus:outline-none ${currPage === Math.ceil(total / APP_PAGE_LIMIT) - 1 ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:text-gray-600 dark:hover:text-gray-200'}`} >
                  {t('appLog.table.pagination.next')}
                  <ArrowRightIcon className="ml-3 h-3 w-3" />
                </Pagination.NextButton>
              </Pagination>
              : null}
          </div>
        </div>
      </div>
    </>
  )
}

export default CodelogPage
